<template>
  <div>权限</div>
  <el-button>tianjia</el-button>

  <vxe-table
    border="inner"
    :tree-config="{transform: true, rowField: 'id', parentField: 'pid'}"
    :data="tableData1"
  >
    <vxe-column
      field="menu_name"
      title="名称"
      tree-node
    />
    <vxe-column
      field="menu_path"
      title="路径"
    />
    <vxe-column
      field="module"
      title="权限"
    />
  </vxe-table>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue'
import { settingMenus } from '@/api/permission'
import type { IFSearchMenu, IFMenus } from '@/api/types/permission'

const conditions = reactive<IFSearchMenu>({
  is_show: '',
  keyword: ''
})

const tableData1 = ref<IFMenus[] | null>(null)

onMounted(async () => {
  const data = await settingMenus(conditions)
  tableData1.value = flatTree(data)
  // 扁平化数组
})

const flatTree = (data:IFMenus[]): IFMenus[] => {
  return data.reduce((pre: IFMenus[], cur) => {
    return pre.concat(cur, (cur.children && cur.children.length ? flatTree(cur.children) : []))
  }, [])
}

</script>

<style lang='scss' scoped></style>
